import 'package:bruno/bruno.dart';
import 'package:common/common.dart';
import 'package:common/image/image_tools.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../wallet/wallet_coin_widget.dart';
import 'member_agreement_widget.dart';
import 'member_config.dart';

class MemberPage extends StatefulWidget {
  const MemberPage({super.key});

  @override
  State<MemberPage> createState() => _MemberPageState();
}

class _MemberPageState extends State<MemberPage> {
  MemberConfigData? membrConfig;
  bool isChecked = false;
  VipOptions? chooseVipOptions;
  @override
  void initState() {
    super.initState();
    fetchMemberConfig();
  }

  void fetchMemberConfig() {
    HttpProvider.get(
      '/vip/index',
      explain: 'VIP购买页',
      success: (result) {
        MemberConfigData config = MemberConfigData.fromJson(result.data);
        membrConfig = config;
        setState(() {});
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset('assets/app/images/member/member_top_bg.png', width: AppScreen.width, fit: BoxFit.cover),
        Scaffold(
          appBar: BrnAppBar(
              title: const Text('会员中心', style: TextStyle(color: Colors.white)),
              backgroundColor: Colors.transparent,
              systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.white)),
          backgroundColor: Colors.transparent,
          body: membrConfig == null
              ? const Center(child: CupertinoActivityIndicator())
              : Container(
                  padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 12),
                  color: Colors.transparent,
                  child: CustomScrollView(
                    slivers: [
                      if (membrConfig?.sec1?.view == 1)
                        SliverToBoxAdapter(
                          child: _buildMemberInfoWarpper(),
                        ),
                      if (membrConfig?.sec2?.view == 1) _buildMemberVipOptionsWarpper(),
                      if (membrConfig?.sec3?.view == 1) _buildMemberVipFlagsHeaderWarpper(),
                      if (membrConfig?.sec3?.view == 1) _buildMemberVipFlagsWarpper(),
                      if (membrConfig?.sec3?.view == 1) _buildMemberVipFlagsFooterWarpper()
                    ],
                  ),
                ),
          bottomNavigationBar: membrConfig?.sec5 != null
              ? Container(
                  height: 140 + AppScreen.safeAreaPaddingBottom,
                  decoration: BoxDecoration(
                      color: const Color(0xFF212121),
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r))),
                  padding: EdgeInsets.only(bottom: AppScreen.safeAreaPaddingBottom),
                  child: Column(
                    children: [
                      Container(
                        height: 51,
                        margin: const EdgeInsets.only(left: 20, right: 20, top: 20),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            gradient: const LinearGradient(
                                colors: [Color(0xFFFFD06A), Color(0xFFFFA851)],
                                begin: Alignment.centerRight,
                                end: Alignment.centerLeft),
                            borderRadius: BorderRadius.circular(25)),
                        child: Text(
                          chooseVipOptions == null ? "确认协议并支付" : "确认协议并支付 ${chooseVipOptions!.priceStr}",
                          style: TextStyle(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w600),
                        ),
                      ).onTap(() {
                        if (chooseVipOptions == null) {
                          return;
                        }
                        if (!isChecked) {
                          Toast.showText('请同意协议');
                          return;
                        }
                        // showModalBottomSheet(
                        //     context: context,
                        //     builder: (_) {
                        //       return MemberPayWidget(
                        //           sec41: membrConfig!.sec41!, price: chooseVipOptions!.priceStr ?? '');
                        //     });

                        showModalBottomSheet(
                            context: context,
                            isScrollControlled: true,
                            builder: (_) {
                              return const WalletCoinWidget();
                            });
                      }),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 32),
                        child: MemberAgreementWidget(
                            title: membrConfig!.sec5!.title ?? "",
                            config: membrConfig!.sec5!.btns!.first,
                            isChecked: isChecked,
                            onChecked: () {
                              isChecked = !isChecked;
                              setState(() {});
                            }),
                      )
                    ],
                  ),
                )
              : const SizedBox(),
        ),
      ],
    );
  }

  SliverToBoxAdapter _buildMemberVipFlagsFooterWarpper() {
    return SliverToBoxAdapter(
      child: Container(
        decoration: BoxDecoration(
            color: const Color(0xFF212121),
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(16.r), bottomRight: Radius.circular(16.r))),
        height: 16.h,
      ),
    );
  }

  SliverToBoxAdapter _buildMemberVipFlagsHeaderWarpper() {
    return SliverToBoxAdapter(
      child: Column(
        children: [
          const SizedBox(height: 20),
          Image.asset('assets/app/images/member/member_herder.png'),
          Container(
            decoration: const BoxDecoration(color: Color(0xFF212121)),
            height: 60.h,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('会员权益',
                      style: TextStyle(fontSize: 14.sp, color: const Color(0xFFD6B587), fontWeight: FontWeight.w600)),
                  Text('普通用户',
                      style: TextStyle(fontSize: 14.sp, color: const Color(0xFFD6B587), fontWeight: FontWeight.w600)),
                  Text('会员用户',
                      style: TextStyle(fontSize: 14.sp, color: const Color(0xFFD6B587), fontWeight: FontWeight.w600))
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  SliverList _buildMemberVipOptionsWarpper() {
    return SliverList.builder(
      itemBuilder: (BuildContext context, int index) {
        VipOptions vipOptions = membrConfig!.sec2!.vipOptions![index];
        return Stack(
          children: [
            Container(
              margin: EdgeInsets.symmetric(vertical: 7.h),
              decoration: BoxDecoration(
                  color: const Color(0xFF212121),
                  borderRadius: BorderRadius.circular(16.w),
                  border: chooseVipOptions != null
                      ? Border.all(
                          color: const Color(0xFFEDA47E), width: vipOptions.vipid == chooseVipOptions!.vipid ? 1 : 0)
                      : Border.all(color: const Color(0xFFEDA47E), width: 0)),
              height: 68.h,
              child: Stack(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 16.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Center(
                          child: Text(
                            vipOptions.vipName ?? '',
                            style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.w600),
                          ),
                        ),
                        SizedBox(width: 8.w),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text.rich(
                                textAlign: TextAlign.center,
                                TextSpan(
                                    style: TextStyle(fontSize: 20.sp, color: Colors.white, fontWeight: FontWeight.bold),
                                    children: [
                                      TextSpan(
                                          text: '${vipOptions.priceOrigStr}',
                                          style: TextStyle(
                                              fontSize: 12.sp,
                                              color: const Color(0xFF999999),
                                              fontWeight: FontWeight.bold)),
                                      TextSpan(text: '${vipOptions.priceStr}'),
                                    ])),
                            const SizedBox(
                              height: 10,
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                  Positioned(right: 0, child: Image.asset('assets/app/images/member/member_zhekou.png', width: 54.w))
                ],
              ),
            ),
          ],
        ).onTap(() {
          chooseVipOptions = vipOptions;
          setState(() {});
        });
      },
      itemCount: membrConfig?.sec2?.vipOptions?.length,
    );
  }

  SliverList _buildMemberVipFlagsWarpper() {
    return SliverList.builder(
      itemBuilder: (BuildContext context, int index) {
        VipRights vipRights = membrConfig!.sec3!.vipRights![index];
        return Container(
          decoration: const BoxDecoration(color: Color(0xFF212121)),
          height: 45.h,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(vipRights.rightName ?? '', style: TextStyle(fontSize: 12.sp, color: Colors.white)),
                Text(vipRights.vipDesc ?? '', style: TextStyle(fontSize: 12.sp, color: Colors.white)),
                Text(vipRights.unvipDesc ?? '', style: TextStyle(fontSize: 12.sp, color: Colors.white))
              ],
            ),
          ),
        );
      },
      itemCount: membrConfig?.sec3?.vipRights?.length,
    );
  }

  Container _buildMemberInfoWarpper() {
    return Container(
      height: 60,
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      margin: const EdgeInsets.only(bottom: 20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ImageView(url: membrConfig?.sec1?.avatar ?? '', width: 42.w, shape: BoxShape.circle),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 8.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  membrConfig?.sec1?.nickname ?? '',
                  style: TextStyle(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w600),
                ),
                Text(
                  membrConfig?.sec1?.params?.vipdesc ?? '',
                  style: TextStyle(color: Colors.white, fontSize: 11.sp),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
